<template>
  <div>
    <div style="margin-bottom: 10px; margin-top: 10px;margin-right: 35px;
text-align: right"  >
    <el-input  v-model="searchName" class="w-50 m-2"  :suffix-icon="Search" placeholder="请输入名字" style="width: 230px" ></el-input>
    <el-button  id="31" type="primary" plain style="margin-left: 10px"
                @click="search">查找</el-button>
    <el-button id="32" type="primary" plain style="margin-left: 10px" @click="Add()">增加</el-button>
    </div>
    <el-scrollbar>
    <el-table :data="tableData">
      <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center">
        <template v-slot="scope">
          <span>{{(currentPage - 1) * pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tenantName" label="租户名" align="center" />
      <el-table-column prop="password" label="密码" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="电话号" align="center"/>
      <el-table-column prop="fee" label="费用(元)" align="center"/>
      <el-table-column prop="" label="操作" align="center" >

        <template v-slot="scope">
          <el-button type="success" @click="Edit(scope.row)" >编辑</el-button>
          <el-button type="danger" @click="Delete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>


      <el-dialog style="width: 300px" v-model="dialogFormVisible" title="租户信息" @close="clean">
        <el-form style="width: 250px" :model="form"  :label-position="labelPosition" ref="form" :rules="rules">
          <el-form-item label="租户名" :label-width="formLabelWidth" prop="name">
            <el-input  v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="form.password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone">
            <el-input v-model="form.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="费用（元）" :label-width="formLabelWidth" prop="fee">
            <el-input v-model="form.fee" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="clear('form')">取消</el-button>
        <el-button type="primary" @click="save()">
          确定
        </el-button>
      </span>
        </template>
      </el-dialog>

    </el-scrollbar>
    <div class='block'>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/util/request"

const {ElMessage} = require("element-plus");

export default {
  name: "AdminTenantManage",
  data() {
    return {

      pageSize:10,
      currentPage:1,
      total:13,

      tableData:[],
      searchName:'',
      dialogFormVisible:false,
      formLabelWidth: '150px',
      labelPosition:'top',
      tempTid:'',
      form: {
        name:'',
        password:'',
        phone:'',
        fee:0.0,
      },

      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],

        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{


    Edit(row){
      this.form.phone=row.phone
      this.form.name=row.tenantName;
      this.form.password=row.password
      this.form.fee=row.fee

      this.dialogFormVisible=true
      this.tempTid=row.tenantName
    },
    search(){
      document.getElementById("31").blur();
      this.loadPost()
    },


    Add(){
      this.dialogFormVisible=true;
      document.getElementById("32").blur();
    },

    clear(formname){
      this.$refs[formname].resetFields();
    },

    save(){

      this.$refs.form.validate(valid=>{
        if(valid) {
          if(this.tempTid==''){

            if(this.form.name!=''&&this.form.password!=''&&this.form.phone!=''){

              this.doSave()
            }else{
              ElMessage({
                message: '信息不能为空！',
                type: 'warning',
              })
            }
          }else{
            this.doEdit()
          }
          this.clear('form')
        }
      })

    },
    doSave(){
      let config = {
         headers:{
           "Content-Type":"multipart/form-data"
         }
      };
       let formData = new FormData();
       formData.append("tenantName",this.form.name);
      formData.append("id",this.$cookies.get("value").id);
      formData.append("fee",this.form.fee);
      formData.append("password",this.form.password);
      formData.append("phone",this.form.phone);

      this.dialogFormVisible=false
      request.post('http://localhost:8090/tenant/insertTenant',formData,config).then(res=>res.data).then(res=>{
        if(res.code=="200"){
          ElMessage({
            message: '添加新用户成功',
            type: 'success',
          })
        }else{
          ElMessage({
            message: res.message,
            type: 'warning',
          })
        }
        this.loadGet()
      });
    },

    doEdit(){
      let config = {
        headers:{
          "Content-Type":"multipart/form-data"
        }
      };
      console.log(this.tempTid)
      let formData = new FormData();
      formData.append("newTenantName",this.form.name);
      formData.append("oldTenantName",this.tempTid);
      formData.append("password",this.form.password);
      formData.append("phone",this.form.phone);
      this.dialogFormVisible=false
      request.post('http://localhost:8090/tenant/updateTenantByName',formData,config).then(res=>res.data).then(res=>{
        if(res.code=="200"){
          console.log(res.data)
          ElMessage({
            message: '编辑已保存',
            type: 'success',
          })
        }else{
          ElMessage({
            message: res.message,
            type: 'warning',
          })
          console.log(res)
        }
        this.tempUid=''
        this.loadGet()
      });
    },
    Delete(row) {
      console.log(row.tid)
      let config = {
         headers:{
           "Content-Type":"multipart/form-data"
         }
      };
       let formData = new FormData();
       formData.append("tenantName",row.tenantName);
      request.post('http://localhost:8090/tenant/deleteTenantByName',formData,config ).then(res => res.data).then(res => {
        if (res.code == "200") {
          ElMessage({
            message: "删除成功",
            type: 'success',
          })
        } else {
          ElMessage({
            message: res.message,
            type: 'warning',
          })
        }
        this.loadGet()
      });
    },
    handleCurrentChange(val){
      console.log(`${val} items per page`)
      this.currentPage=val
      this.loadGet()
    },
    loadGet(){
          console.log("loadget")
          request.post('http://localhost:8090/tenant/showTenant').then(res=>res.data).then(res=>{
            this.tableData=res.data[this.currentPage-1].records
            this.total=res.data[this.currentPage-1].total
            console.log(res.data[0].records)
          });
        },
    loadPost(){
      let config = {
        headers:{
          "Content-Type":"multipart/form-data"
        }
      };
      let formData = new FormData();
      formData.append("tenantName",this.searchName);

      request.post('http://localhost:8090/tenant/findTenantByName',formData,config
       ).then(res=>res.data).then(res=>{
        if(res.code=="200"){
          console.log(res.data)
          this.tableData=res.data;
        }else{
          alert("查询失败")
          console.log(res)
        }
      });
    },


  },
  beforeMount() {
        this.loadGet()
  }

}
</script>

<style scoped>

</style>
